@import "base.scss";

.add-on-item-main {

  .coupon-amount {
    height: 44px;
    line-height: 44px;
  }

  .subtotal {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 50px;
    padding: 7px 15px;
    box-sizing: border-box;
    box-shadow: 0px 2px 10px rgba(53,59,64, .4);

    .btn-to-cart {
      background: linear-gradient(left, #FF9169, #F2533D);
      height: 36px;
      line-height: 36px;
      border-radius: 18px;
    }
  }

  .pop-box{

    .pop-msg{
      padding:  15px 12px;

      //title
      .title{
        display: flex;

        img{
          width: 100px;
          height: 100px;
          vertical-align: middle;
        }

        div{
          display: flex;
          flex-direction: column;
          justify-content: center;
          height: 100px;
          width: calc(100% - 100px);
          margin-left: 12px;

          p:nth-child(1){
            color: #F54E4E;
            font-size: 17px;
          }

          p:nth-child(2){
            color: #7A7B82;
            font-size: 14px;
          }

          i{
            position: absolute;
            top: 0;
            right: 0;
            margin: 15px 12px;
          }
        }
      }
      //title

      //cell
      .pop-cell{
        div{

          p:nth-child(1){
            margin-top: 18px;
          }

          p:nth-child(2) {
            display: flex;
            flex-wrap: wrap;

            span{
              height: 28px;
              line-height: 28px;
              border: 1px solid #C5C5CC;
              color: #7A7B82;
              padding:0 12px;
              margin:8px 12px 8px 0;
              border-radius:4px;
            }
          }
        }
        .color{

        }

        .type{
          p:nth-child(2) {

            span{
              //padding:0;
              //width: 52px;

              text-align: center;
            }
          }
        }

        .number{
          p{
            display: flex;
            justify-content: space-between;
            line-height: 30px;


            span:nth-child(2){
              i{
                display: inline-block;
                width: 28px;
                height: 28px;
                line-height: 28px;
                border: 1px solid #C5C5CC;
                float: right;
                color: #7A7B82;
                text-align: center;
              }

              i:nth-child(1){
                margin-left:-1px;
              }

              i:nth-child(2){
                min-width: 36px;
                color: #45454D;
                font-style: normal;
              }

              i:nth-child(3){
                background-color: #F7F8FA;
                margin-right:-1px;
                border-top:1px solid #E8E8E8;
                border-bottom:1px solid #E8E8E8;
                border-left:1px solid #E8E8E8;
                border-right: 1px solid #C5C5CC;
              }
            }
          }
        }

        .cell-none{
          color: #ccc !important;
          background-color: #FAFAFA !important;
          border-color: #E6E6E6 !important;
          //pointer-events: none;
        }

        .cell-active-border{
          //color: #7E82F6 !important;
          border-color: #FD6252 !important;
        }

        .cell-active-text{
          color: #FD6252 !important;
        }
      }
      //cell
    }

    .pop-btn{
      display: flex;
      height: 50px;
      line-height: 50px;
      color: #fff;
      font-size: 15px;

      p {
        flex: 1;
        justify-content: center;
        align-items: center;

        span{
          display: inline-block;
          width: 90%;
          line-height: 40px;
          height: 40px;
          border-radius: 20px;
        }
      }
    }
  }
}
